<template>
<div v-cloak>  
    <el-form :model="user"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户姓名" prop="user_name">
        <el-col :span="8">
          <el-input v-model="user.user_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="账号" prop="user_account">
        <el-col :span="8">
          <el-input v-model="user.user_account"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" prop="user_pwd">
        <el-col :span="10" style="display:flex;">
          <el-input v-model="user.user_pwd" style="margin-right:20px;" :disabled="notEditPwd" @keyup.enter.native="updatePWD"></el-input>
          <el-button type="primary" icon="el-icon-edit" circle @click="notEditPwd = false" ></el-button>
        </el-col>
      </el-form-item>

      <el-form-item label="邮箱" prop="user_email">
        <el-col :span="10">
          <el-input v-model="user.user_email"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="等级" prop="grade">
        <el-col :span="11">
          <el-select v-model="user.grade">
            <el-option label="普通用户 " value="user"></el-option>
            <el-option label="作家 " value="author"></el-option>
            <el-option label="管理员 " value="admin"></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item label="描述" prop="user_desc">
        <el-col :span="11">
          <el-input type="textarea" v-model="user.user_desc"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="头像">
        <el-col :span="10">
            <el-image :lazy='true' v-if="user.user_cover" :src="user.user_cover" fit="cover" style="width: 200px; height: 200px"></el-image>
            <el-upload class="avatar-uploader" 
                  :action="$http.defaults.baseURL + 'upload'" 
                  accept="image/jpeg,image/gif,image/png"
                  :on-success="afterUpload" 
                  :data="{user_id: user.user_id}"
                  :before-upload="beforeAvatarUpload">
                <button type="button" class="el-button filter-item el-button--primary" style="margin-top:10px">
                    <i class="fa fa-cloud-upload" aria-hidden="true"></i><span>上传头像</span>
                </button>
            </el-upload>
        </el-col>
      </el-form-item>
    
      <el-form-item>
        <el-button type="primary" @click="submitForm">立即修改</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
</div>
</template>
<script>
 import md5 from 'blueimp-md5';
    export default {
        data() {
          return {
            user:{},
            notEditPwd:true,
          };
        },
        created(){
          this.getFormData()
        },
        methods: {
          afterUpdate(){
              this.$router.push('/usersManage/userList')
              this.$store.commit('SET_USER',{})
          },
           beforeAvatarUpload(file) {
            console.log("上传之前");
            const isJPG = file.type === "image/jpeg" || "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
              this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
          },
          // 更新密码
            async updatePWD(){
                this.user.user_pwd = md5(this.user.user_pwd)
                await this.$http.put('/update_pwd',this.user)
                this.$message({
                  type:"success",
                  message:"更新密码成功"
                })
                this.afterUpdate()      
            },
            afterUpload(res){
              // 显示设置personInfo的 user_cover值
              this.$set(this.user, 'user_cover', res.url)
            },
            getFormData(){
              this.user = JSON.parse(JSON.stringify(this.$store.getters.User));
             
            },
           async  submitForm() {
              console.log(this.user);
              let res = await this.$http.put('/admin_update_user',this.user)
               this.$message({
                type:res.data.type,
                message:res.data.message
              })
              this.afterUpdate()
            },
            resetForm() {
              this.user = JSON.parse(JSON.stringify(this.$store.getters.User));
            }
        }
      }
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.component-item{
  margin-top: 100px;
}
.code-part{
  margin-top: 20px;
}
</style>
